<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>
<div class="layui-container" style="margin: 10px 0px; ">
    <form class="layui-form layui-form-pane">
        <input type="hidden" id="goodsId" th:value="${m.goodsId}">
        <input type="hidden" id="addressId" th:value="${m.addressId}">
        <input type="hidden" id="courier" th:value="${m.courier}">
        <div class="layui-form-item">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" readonly name="number" th:value="${m.number}" autocomplete="off" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单状态</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '0'" value="待支付" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '1'" value="待发货" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '2'" value="待收货" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '3'" value="已完成" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '4'" value="支付异常" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '5'" value="退换货" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
                <input class="layui-input" type="text" readonly name="status" th:if="${m.status} == '6'" value="已退款" autocomplete="off" style='margin-top: 15px;width: 75px; height: 38px; background-color: #e8f4ff;border-color: #d1e9ff; text-align: center; line-height: 32px; color: #1890ff'/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">订单用户</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" readonly name="user" th:value="${m.user}" autocomplete="off" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">费用金额</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" readonly name="actuallyPaid" th:value="${m.actuallyPaid}" autocomplete="off" />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">地址信息</label>
            <table class="layui-table" id="addressTable" lay-filter="addressTable"></table>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">商品信息</label>
            <table class="layui-table" id="goodsTable" lay-filter="goodsTable"></table>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">快递信息</label>
            <table class="layui-table" id="courierTable" lay-filter="courierTable"></table>
        </div>
    </form>
</div>
<script id="photo" type="text/html">

    {{# if(d.photo!=''){ }}
    <img src="/file/fc/showImg/{{d.photo}}">
    {{# }}}
</script>

<script>
    var $;
    layui.use(['table','jquery'], function(){
        var table = layui.table;
        $ = layui.jquery;
        var goodsId = $('#goodsId').val();
        var courier = $('#courier').val();
        var addressId = $('#addressId').val();
        //地址列表
        table.render({
            elem: '#addressTable'
            ,url: '/address/ra/order/find' //数据接口
            ,where:{
                id: addressId
            }
            ,cols: [
                [ //表头
                {field: 'receiver', title: '收货人', width:140}
                ,{field: 'phone', title: '手机号', width:140}
                ,{field: 'areaAddress', title: '区域地址',width: 180}
                ,{field: 'address', title: '详细地址'}
            ]
            ]
        });


        table.render({
            elem:'#goodsTable',
            url:'/goods/gc/order/find',
            where:{
                id: goodsId
            },
            cols:[
                [
                    {field:'id',align:'center',title:'商品Id',width:110},
                    {field:'photo',title:'商品图片',width: 90,templet:'#photo'},
                    {field:'name',align:'center',title:'商品名称',width:110},
                    {field:'number',align:'center',title:'商品编号',width:110},
                    {field:'marketPrice',align:'center',title:'价格',templet:function (obj){
                            return obj.categories+"￥"
                        }},
                    {field:'specification',align:'center',title:'商品规格',width:150}
                ]
            ]
        });

        table.render({
            elem: '#courierTable'
            ,url: '/cc/order/find' //数据接口
            ,where:{
                id: courier
            }
            ,cols: [
                [ //表头
                    {field: 'company', title: '快递公司', width:110}
                    ,{field: 'number', title: '快递编号', width:110}
                    ,{field: 'createTime', title: '发货时间'}
                ]
            ]
        });

    });
</script>
</body>
</html>